<template>
  <div
      class="gantt-markline"
      :style="{
      backgroundColor: timeConfig.color || '#0ca30a',
      left: position + 'px'
    }"
  >
    <div
        class="gantt-markline-label"
        :style="{
        backgroundColor: timeConfig.color || '#0ca30a'
      }"
    >
      {{ formattedTime }}
    </div>
  </div>
</template>

<script setup lang="ts">
import {computed, PropType} from 'vue';
import dayjs from 'dayjs';

interface TimeConfig {
  time: Date | string | null;
  color?: string;
}

const props = defineProps(
    {
      timeConfig: {
        type: Object as PropType<TimeConfig>,
      },
      getPositionOffset: {
        type: Function as PropType<(date: string) => number>,
        required: true
      },
    }
);

const position = computed(() => {
  if (!props.timeConfig.time) {
    return 0;
  }
  return props.getPositionOffset(dayjs(props.timeConfig.time).toDate());
});

const formattedTime = computed(() => {
  if (!props.timeConfig.time) {
    return '';
  }
  return dayjs(props.timeConfig.time).format("HH:mm:ss");
});
</script>

<style scoped>
.gantt-markline {
  /* 你的样式 */
}

.gantt-markline-label {
  /* 你的样式 */
}
</style>
